<template>
  <div class="home-container">
    <!-- 顶部横幅 -->
    <section class="hero-section">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <h1 class="display-4 fw-bold">智慧护理培训系统</h1>
            <p class="lead">专为医疗机构打造的全方位护理人才培养平台</p>
            <p class="mb-4">提供标准化培训、实操模拟、考核评估和专业交流，助力护理人员专业成长</p>
            <div class="d-flex gap-3">
              <router-link to="/login" class="btn btn-primary btn-lg">
                <i class="bi bi-box-arrow-in-right me-2"></i>立即登录
              </router-link>
              <a href="#features" class="btn btn-outline-primary btn-lg">
                <i class="bi bi-info-circle me-2"></i>了解更多
              </a>
            </div>
          </div>
          <div class="col-lg-6 d-none d-lg-block">
            <img src="https://placeholder.pics/svg/600x400/DEDEDE/555555/护理培训系统" alt="护理培训系统" class="img-fluid rounded shadow-lg" />
          </div>
        </div>
      </div>
    </section>

    <!-- 系统特点 -->
    <section id="features" class="py-5 bg-light">
      <div class="container">
        <div class="text-center mb-5">
          <h2 class="fw-bold">系统特点</h2>
          <p class="text-muted">专业、高效、智能的护理培训解决方案</p>
        </div>

        <div class="row g-4">
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm">
              <div class="card-body text-center p-4">
                <div class="feature-icon bg-primary bg-gradient text-white rounded-circle mb-3">
                  <i class="bi bi-shield-lock"></i>
                </div>
                <h4 class="card-title">角色分层管控</h4>
                <p class="card-text">设置管理员、培训导师、护理学员等角色，权限清晰区分，满足不同培训场景需求</p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm">
              <div class="card-body text-center p-4">
                <div class="feature-icon bg-primary bg-gradient text-white rounded-circle mb-3">
                  <i class="bi bi-book"></i>
                </div>
                <h4 class="card-title">丰富培训资源</h4>
                <p class="card-text">提供理论知识、实操要点视频/文档，支持课程分类与版本迭代，构建完整培训体系</p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm">
              <div class="card-body text-center p-4">
                <div class="feature-icon bg-primary bg-gradient text-white rounded-circle mb-3">
                  <i class="bi bi-graph-up"></i>
                </div>
                <h4 class="card-title">全面评估体系</h4>
                <p class="card-text">线上考核评估，自动判分与记录，生成详细学员报告，清晰呈现能力短板</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心功能 -->
    <section class="py-5">
      <div class="container">
        <div class="text-center mb-5">
          <h2 class="fw-bold">核心功能</h2>
          <p class="text-muted">全方位满足护理培训需求</p>
        </div>

        <div class="row align-items-center mb-5">
          <div class="col-lg-6 order-lg-2">
            <img src="https://placeholder.pics/svg/500x300/DEDEDE/555555/课程资源管理" alt="课程资源管理" class="img-fluid rounded shadow" />
          </div>
          <div class="col-lg-6 order-lg-1">
            <h3 class="fw-bold">培训核心功能</h3>
            <ul class="feature-list">
              <li>
                <i class="bi bi-check-circle-fill text-primary me-2"></i>
                <strong>课程资源管理：</strong>导师在线上传护理课程，支持课程分类与版本迭代
              </li>
              <li>
                <i class="bi bi-check-circle-fill text-primary me-2"></i>
                <strong>在线学习模块：</strong>视频倍速播放、学习进度保存、笔记记录，实时解决学习疑问
              </li>
              <li>
                <i class="bi bi-check-circle-fill text-primary me-2"></i>
                <strong>实操模拟训练：</strong>虚拟实操场景，智能提示操作偏差，辅助规范技能动作
              </li>
              <li>
                <i class="bi bi-check-circle-fill text-primary me-2"></i>
                <strong>考核评估体系：</strong>线上考核，自动判分，生成学员考核报告
              </li>
            </ul>
          </div>
        </div>

        <div class="row align-items-center">
          <div class="col-lg-6">
            <img src="https://placeholder.pics/svg/500x300/DEDEDE/555555/互动与辅助功能" alt="互动与辅助功能" class="img-fluid rounded shadow" />
          </div>
          <div class="col-lg-6">
            <h3 class="fw-bold">互动与辅助功能</h3>
            <ul class="feature-list">
              <li>
                <i class="bi bi-check-circle-fill text-primary me-2"></i>
                <strong>培训社区交流：</strong>护理交流论坛，分享案例、请教难题，促进经验交流
              </li>
              <li>
                <i class="bi bi-check-circle-fill text-primary me-2"></i>
                <strong>培训计划管理：</strong>制定培训计划，自动推送学习提醒，保障培训节奏
              </li>
              <li>
                <i class="bi bi-check-circle-fill text-primary me-2"></i>
                <strong>日志审计功能：</strong>记录用户关键操作，支持按条件检索日志，辅助问题排查
              </li>
              <li>
                <i class="bi bi-check-circle-fill text-primary me-2"></i>
                <strong>权限动态调整：</strong>依据培训阶段、岗位变动，灵活调整用户权限
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 角色介绍 -->
    <section class="py-5 bg-light">
      <div class="container">
        <div class="text-center mb-5">
          <h2 class="fw-bold">角色分层</h2>
          <p class="text-muted">满足不同用户的培训需求</p>
        </div>

        <div class="row g-4">
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm">
              <div class="card-body p-4">
                <div class="d-flex align-items-center mb-3">
                  <div class="role-icon bg-primary text-white rounded-circle me-3">
                    <i class="bi bi-person-gear"></i>
                  </div>
                  <h4 class="card-title mb-0">管理员</h4>
                </div>
                <p class="card-text">统管系统配置、用户与课程管理，负责整体培训体系的规划与监督</p>
                <ul class="role-features">
                  <li><i class="bi bi-dot"></i> 系统配置与维护</li>
                  <li><i class="bi bi-dot"></i> 用户权限管理</li>
                  <li><i class="bi bi-dot"></i> 培训计划审核</li>
                  <li><i class="bi bi-dot"></i> 系统数据分析</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm">
              <div class="card-body p-4">
                <div class="d-flex align-items-center mb-3">
                  <div class="role-icon bg-success text-white rounded-circle me-3">
                    <i class="bi bi-person-workspace"></i>
                  </div>
                  <h4 class="card-title mb-0">培训导师</h4>
                </div>
                <p class="card-text">创建课程内容、批改作业、组织考核，指导学员专业成长</p>
                <ul class="role-features">
                  <li><i class="bi bi-dot"></i> 课程内容创建</li>
                  <li><i class="bi bi-dot"></i> 作业批改与反馈</li>
                  <li><i class="bi bi-dot"></i> 考核组织与评估</li>
                  <li><i class="bi bi-dot"></i> 学员问题解答</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm">
              <div class="card-body p-4">
                <div class="d-flex align-items-center mb-3">
                  <div class="role-icon bg-info text-white rounded-circle me-3">
                    <i class="bi bi-person-badge"></i>
                  </div>
                  <h4 class="card-title mb-0">护理学员</h4>
                </div>
                <p class="card-text">学习课程内容、参与实操训练、完成考核评估，提升专业技能</p>
                <ul class="role-features">
                  <li><i class="bi bi-dot"></i> 课程学习</li>
                  <li><i class="bi bi-dot"></i> 实操训练</li>
                  <li><i class="bi bi-dot"></i> 考核参与</li>
                  <li><i class="bi bi-dot"></i> 社区交流</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-5">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8 text-center">
            <h2 class="fw-bold mb-4">开始您的护理培训之旅</h2>
            <p class="lead mb-5">智慧护理培训系统，助力医疗机构培养高素质护理人才</p>
            <div class="d-flex justify-content-center gap-3">
              <router-link to="/login" class="btn btn-primary btn-lg px-4">
                <i class="bi bi-box-arrow-in-right me-2"></i>立即登录
              </router-link>
              <router-link to="/register" class="btn btn-outline-primary btn-lg px-4">
                <i class="bi bi-person-plus me-2"></i>注册账号
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <h5>智慧护理培训系统</h5>
            <p class="small">专业的护理人才培养平台，助力医疗机构提升护理服务质量</p>
          </div>
          <div class="col-md-3">
            <h5>快速链接</h5>
            <ul class="list-unstyled">
              <li><router-link to="/login" class="text-white-50">登录</router-link></li>
              <li><router-link to="/register" class="text-white-50">注册</router-link></li>
              <li><a href="#features" class="text-white-50">系统特点</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <h5>联系我们</h5>
            <ul class="list-unstyled">
              <li><i class="bi bi-envelope me-2"></i> contact@nursetrain.com</li>
              <li><i class="bi bi-telephone me-2"></i> 400-123-4567</li>
            </ul>
          </div>
        </div>
        <hr class="my-4" />
        <div class="text-center">
          <p class="small mb-0">© 2023 智慧护理培训系统. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 页面加载时的动画效果
onMounted(() => {
  // 这里可以添加页面加载时的动画效果
});
</script>

<style scoped>
.home-container {
  overflow-x: hidden;
}

.hero-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  font-size: 1.5rem;
}

.role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.2rem;
}

.feature-list {
  list-style: none;
  padding-left: 0;
}

.feature-list li {
  margin-bottom: 1rem;
}

.role-features {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}

.role-features li {
    margin-bottom: 0.5rem;
  }
</style>